<!DOCTYPE html>
<html>
<head>
    <title>用户数据管理</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <style>
        table {
            border-collapse: collapse;
            width: 100%;
            margin-top: 20px;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }
        th {
            background-color: #f2f2f2;
        }
        .debug {
            color: green;
            margin: 10px 0;
            font-weight: bold;
        }
    </style>
</head>
<body>
<div id="app">
    <button @click="fetchUsers">点击按钮获取用户数据</button>
    <div class="debug" v-if="debugMsg">{{ debugMsg }}</div>

    <table v-if="users.length > 0">
        <thead>
            <tr>
                <th><input type="checkbox" @click="toggleSelectAll"></th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="user in users" :key="user.id">
                <td><input type="checkbox" v-model="selectedUsers" :value="user.id"></td>
                <td>{{ user.name }}</td>
                <td>{{ user.age }}</td>
                <td>{{ user.gender }}</td>
                <td>
                    <button @click="deleteUser(user.id)">删除</button>
                    <button @click="editUser(user.id)">编辑</button>
                </td>
            </tr>
        </tbody>
    </table>
    <div v-else>暂无数据，请点击按钮加载</div>
</div>

<script>
    const { createApp, ref } = Vue;

    createApp({
        setup() {
            const users = ref([]);
            const selectedUsers = ref([]);
            const selectAll = ref(false);
            const debugMsg = ref('');

            // 获取用户数据
            const fetchUsers = () => {
                debugMsg.value = '正在加载数据...';
                axios.get('/static/app01/user.json')
                    .then(response => {
                        console.log('原始数据:', response.data);

                        // 确保数据是数组且包含所需字段
                        if(Array.isArray(response.data)) {
                            users.value = response.data.map(item => ({
                                id: item.id || Math.random().toString(36).substr(2, 9),
                                name: item.name || '无名氏',
                                age: item.age || 0,
                                gender: item.gender || '未知'
                            }));

                            debugMsg.value = `成功加载 ${users.value.length} 条数据`;
                            console.log('处理后的数据:', users.value);
                        } else {
                            debugMsg.value = '数据格式错误：不是数组';
                        }
                    })
                    .catch(error => {
                        debugMsg.value = '加载失败：' + error.message;
                        console.error('请求错误:', error);
                    });
            };

            // 删除用户
            const deleteUser = (userId) => {
                users.value = users.value.filter(user => user.id !== userId);
                debugMsg.value = `已删除用户ID: ${userId}`;
            };

            // 编辑用户
            const editUser = (userId) => {
                const user = users.value.find(u => u.id === userId);
                if(user) {
                    const newName = prompt('输入新姓名', user.name);
                    if(newName) {
                        user.name = newName;
                        debugMsg.value = `已更新用户: ${newName}`;
                    }
                }
            };

            // 全选/取消全选
            const toggleSelectAll = () => {
                selectAll.value = !selectAll.value;
                selectedUsers.value = selectAll.value ? users.value.map(user => user.id) : [];
            };

            return {
                users,
                selectedUsers,
                selectAll,
                debugMsg,
                fetchUsers,
                deleteUser,
                editUser,
                toggleSelectAll
            };
        }
    }).mount("#app");
</script>
</body>
</html>